<!DOCTYPE html>

<html>
<head>
    <title>Board</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../static/js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="../static/css/bulma.min.css"/>

    <style type="text/css">
        *, body {
            margin: 0px;
            padding: 0px;
        }

        .m-head {
            background-color: white;
            position: fixed;
            z-index: 10;
            width: 100%;
            top: 0px;
            padding-top: 40px;
            padding-bottom: 40px;
            text-align: center;
        }

        .m-middle {
            padding-bottom: 40px;
        }

        .m-body {
            margin-top: 100px;
        }

        .m-box {
            margin-top: 20px;
            align-items: center;
        }

        .copy-content {
            font-size: 1.4em;
        }

        .add {
            padding: 0 50px;
        }


    </style>
</head>

<body>

<div class="m-head">
    <div class="container">
        <div class="columns">
            <div class="column"></div>
            <div class="column is-half">
                <div class="field has-addons">
                    <div class="control is-expanded">
                        <input id="content" class="input" type="text"/>
                    </div>
                    <div class="control">
                        <a class="button is-info add">
                            Add
                        </a>
                    </div>
                </div>
            </div>
            <div class="column"></div>
        </div>
    </div>
</div>

<div class="columns m-body">
    <div class="column"></div>
    <div id="list" class="column is-half m-middle">

    {{range .list}}
        <div class="columns box m-box" id="item-{{.Id}}">
            <div class="column">
                <div>{{.CreateTime}}</div>
                <input id="i-{{.Id}}" class="input is-medium" type="text" value="{{.Msg}}" readonly/>
            </div>
            <a class="button copy" data-id="{{.Id}}">Copy</a>
        </div>
    {{end}}

    </div>
    <div class="column"></div>
</div>
<script type="text/javascript">

    var uid = {{.uid}};
    var res;
    $(function () {

        $(".add").click(function () {
            let msg = $("#content").val()
            $.post("http://localhost:8080/v1/copy", {
                uid: uid,
                copy: msg
            }, function (data) {
                res = data
                console.log("Data: " + data.code + " " + data.data.CreateTime + " " + data.data.Msg);
                if (200 == data.code) {
                    $("#content").val("")
                    $("#list").prepend(`<div class="columns box m-box" id="item-${data.data.Id}">
                    <div class="column">
                        <div>${data.data.CreateTime}</div>
                        <input class="input is-medium" id="i-${data.data.Id}" type="text" value="${data.data.Msg}" readonly />
                    </div>
                    <a class="button copy" data-id="${data.data.Id}">Copy</a>
                    </div>`)
                } else {

                }
            })
        })

        $(document).on("click", ".copy", function () {
            let id = this.getAttribute("data-id");
            console.log("id: " + id)
            $("#i-" + id).CopyToClipboard();
            $.post("http://localhost:8080/v1/delete", {
                uid: uid,
                copyId: id
            }, function (data) {
                if (data.code == 200) {
                    $("#item-" + id).remove()
                } else {
                    alert(data.data)
                }
            })
        })
    })
</script>
<script src="../static/js/clipboard.min.js"></script>
</body>
</html>
